<template>
    <view :style="[magicBoxStyle]">
		<view class="wlkflex wrap justify-between align-content-between hg100"  v-if="item.params.mode=='1' || item.params.mode=='2' || item.params.mode=='3' || item.params.mode=='4' ">
            <view v-for="(magic,index) in item.data.image" :key="index" @click="jump(magic.linkpath)">
                <image class="block" :style="[magicImgStyle]" mode="aspectFill" lazy-load :src="magic.url"></image>
            </view>
        </view>
        <view class="wlkflex justify-between hg100" v-if="item.params.mode=='5'">
            <view>
                <image @click="jump(item.data.image[0].linkpath)" :style="[magicImgOnlyHeight]" class="block" mode="aspectFill" lazy-load :src="item.data.image[0].url"></image>
            </view>
            <view class="hg100 wlkflex align-content-between wrap" :style="[magicImgOnlyHeight]">
                <image @click="jump(item.data.image[1].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[1].url"></image>
                <image @click="jump(item.data.image[2].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[2].url"></image>
            </view>
        </view>
        <view class="wlkflex justify-between hg100"  v-if="item.params.mode=='6'">
            <view>
                <image @click="jump(item.data.image[0].linkpath)" :style="[magicImgOnlyHeight]" class="block" mode="aspectFill" lazy-load :src="item.data.image[0].url"></image>
            </view>
            <view class="hg100 wlkflex align-content-between wrap" :style="[magicImgOnlyHeight]">
                <image @click="jump(item.data.image[1].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[1].url"></image>
                <view class="wlkflex justify-between" :style="[magicImgStyle]">
                    <image @click="jump(item.data.image[2].linkpath)" :style="[magicImgSmallStyle]" class="hg100 block" mode="aspectFill" lazy-load :src="item.data.image[2].url"></image>
                    <image @click="jump(item.data.image[3].linkpath)" :style="[magicImgSmallStyle]" class="hg100 block" mode="aspectFill" lazy-load :src="item.data.image[3].url"></image>
                </view>
            </view>
        </view>
        <view class="hg100 wlkflex align-content-between wrap" v-if="item.params.mode=='7'" >
            <view>
                <image @click="jump(item.data.image[0].linkpath)" :style="[magicImgOnlyWidth]" class="block" mode="aspectFill" lazy-load :src="item.data.image[0].url"></image>
            </view>
            <view class="wlkflex justify-between wd100">
                <image @click="jump(item.data.image[1].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[1].url"></image>
                <image @click="jump(item.data.image[2].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[2].url"></image>
            </view>
        </view>
        <view class="wlkflex justify-between hg100" v-if="item.params.mode=='8'">
          <view>
            <image @click="jump(item.data.image[0].linkpath)" :style="[magicImgOnlyHeight]" class="block" mode="aspectFill" lazy-load :src="item.data.image[0].url"></image>
          </view>
          <view class="hg100 wlkflex align-content-between wrap" :style="[magicImgOnlyHeight]">
            <image @click="jump(item.data.image[1].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[1].url"></image>
            <image @click="jump(item.data.image[2].linkpath)" :style="[magicImgStyle]" class="block" mode="aspectFill" lazy-load :src="item.data.image[2].url"></image>
          </view>
        </view>
	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
	export default {
		name:"wlk-magic",
		data() {
			return {
                magicBoxStyle:{backgroundColor:'transparent',padding:'',height:''},
                magicImgStyle:{width:'',height:''},
                magicImgSmallStyle:{width:''},
                magicImgOnlyHeight:{width:'',height:''},
                magicImgOnlyWidth:{width:'',height:''},


			};
		}, //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            systemInfo: {
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        },
        created:function(e){
            this.setMagicStyle();
        },
        methods: {
            setMagicStyle(){
                var _self = this;
                var systemWidth = this.systemInfo.windowWidth - this.item.style.pageMargin*2;
                var length = 0;
                this.magicBoxStyle.padding = '0 '+uni.$u.addUnit(this.item.style.pageMargin*2,'rpx');
                this.magicBoxStyle.backgroundColor = this.item.style.bgColor;
                this.magicBoxStyle.backgroundColor = this.item.style.bgColor;
                switch (this.item.params.mode) {
                    case '1':
                    case '4':
                    case '5':
                    case '6':
                    case '7':
                    case '8':
                        length = 2;
                        this.magicImgStyle.width = uni.$u.addUnit(((systemWidth-this.item.style.imageMargin) / length),'px');
                        break;
                    case '2':
                        length = 3;
                        this.magicImgStyle.width = uni.$u.addUnit(((systemWidth-this.item.style.imageMargin*2) / length),'px');
                        break;
                    case '3':
                        length = 4;
                        this.magicImgStyle.width = uni.$u.addUnit(((systemWidth-this.item.style.imageMargin*3) / length),'px');
                        break;
                }
                if(['1', '2', '3'].includes(this.item.params.mode)){
                    _self.magicImgStyle.height = _self.item.height;

                }else if(['4'].includes(this.item.params.mode)){
                    this.magicBoxStyle.height= uni.$u.addUnit(386,'px');
                    this.magicImgStyle.height = uni.$u.addUnit( (386 / length)-this.item.style.imageMargin/2 ,'px');
                }else if(['5','6'].includes(this.item.params.mode)){
                    this.magicImgOnlyHeight.width = this.magicImgStyle.width;
                    this.magicImgOnlyHeight.height = uni.$u.addUnit( 386,'px');
                    this.magicImgStyle.height = uni.$u.addUnit( (386 / length)-this.item.style.imageMargin/2 ,'px');
                    if(this.item.params.mode == '6'){
                        this.magicImgSmallStyle.width = uni.$u.addUnit(uni.$u.getPx(this.magicImgStyle.width) /2 -this.item.style.imageMargin/2,'px')
                    }
                }else if(['7'].includes(this.item.params.mode)){
                    this.magicBoxStyle.height= uni.$u.addUnit(386,'px');
                    this.magicImgOnlyWidth.width = uni.$u.addUnit(systemWidth,'px');
                    this.magicImgOnlyWidth.height = uni.$u.addUnit( (386 / length)-this.item.style.imageMargin/2 ,'px');
                    this.magicImgStyle.height = uni.$u.addUnit( (386 / length)-this.item.style.imageMargin/2 ,'px');
                }else if(['8'].includes(this.item.params.mode)){
                  this.magicImgOnlyHeight.width = this.magicImgStyle.width;
                  this.magicImgOnlyHeight.height = uni.$u.addUnit( 193,'px');
                  this.magicImgStyle.height = uni.$u.addUnit( (193 / length)-this.item.style.imageMargin/2 ,'px');
                }
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss">

</style>